@import "nib"
@import "const"
@import "iconfont.css"
@import "reset"
global-reset()
reset-html5()

body
  absolute left 0 top 0
  width 100%
  height 100%
  background $backgroundColor
  padding-right 35px
  min-width 1000px

.container
  position relative
  width 1180px
  margin 0 auto
  clearfix()

.content
  min-width 1000px

img:after
  font-family "iconfont" !important
  content "\e614"
  font-size 20px
  text-align center
  color: rgb(100, 100, 100)
  display block
  position absolute
  z-index 2
  top 0
  left 0
  width 100%
  height 100%
  background-color #fff

header
  background $mainColor
  nav
    height 60px
    a
      float left
      position relative
      line-height 60px
      text-decoration none
      color $whiteColor
      font-size 16px
      line-height 60px
      text-align center
      transition .2s ease-out
      &:nth-child(6)
        margin-left 27px

.logo
  width 135px

.hot
  position absolute;
  top -4px
  right 0px
  font-size 30px
  color #F84139
  line-height 30px

.app-download
  &:hover
    div
      display block
  div
    z-index 20
    display none
    position absolute
    width 200px
    height 240px
    box-shadow 0 1px 2px rgba(0, 0, 0, .5)
    top 100%
    background-color #ffffff
    margin-top -8px
    margin-left 3px
    padding 3px 10px
    &::before
      content ' '
      border 5px solid #fff
      display block
      position absolute
      top -10px
      left 10px
      border-color transparent transparent #fff
    h3
      font-size 16px
      font-weight bold
      color $blackColor
      line-height 40px
    img
      width 100%

.nav-link
  width 106px
  &:hover
    background #0c77d1
  &.active
    background $secondColor

.nav-service
  width 106px
  color #d2e7f9
  &:hover
    color $whiteColor
  i
    margin-right 1px

.login
  float right
  width 94px
  font-size 14px
  color $whiteColor
  i
    position relative
    top 3px

.locate
  height 55px

.location
  position absolute
  left 0
  top 0
  font-size 12px
  > span, > a
    color #999
    line-height 54px
    display inline-block
    float left
    margin-right 5px
  .location-content
    text-overflow ellipsis
    overflow hidden
    max-width 138px
    white-space nowrap
    color rgb(51, 51, 51)
    text-decoration none
    &:hover
      color #0089dc
  .location-switch
    color #0089dc
    text-decoration none

.search
  position absolute
  right 0
  top 0
  margin 10px 0
  background $whiteColor
  border 1px solid #ccc
  input
    padding 0 8px
    margin 4px 0
    line-height 26px
    border 0px
    width 220px
    transition width .3s ease-in-out
    &:focus
      width 290px
      outline 0 !important
  i
    float right
    line-height 34px
    margin 0 2px
    font-size 18px
    color #999
    text-align center

.slider
  position relative
  height 100px
  overflow hidden
  ul
    position relative
    clearfix()
    top 0
    transition top .5s ease-in-out
    li
      display block;
      a
        clearfix()
      img
        width 100%
        height 100px
        display block
        position relative
      img:after
        font-family "iconfont" !important
        content "\e614"
        font-size 50px
        text-align center
        line-height 100px
        color: rgb(100, 100, 100)
        display block
        position absolute
        z-index 2
        top 0
        left 0
        width 100%
        height 100%
        background-color #fff
  ol
    z-index 3
    position absolute
    bottom 5px
    right 5px
    li
      float left
      width 15px
      color #999
      display inline-block
      background-color rgba(255, 255, 255, .5)
      font-size 12px
      padding: 0 1px
      text-align center
      vertical-align middle
      cursor pointer
      margin-right 5px
      line-height 18px
      &.active
        background rgba(255, 102, 0, .8)
        color $whiteColor

.takeout
  position relative
  background url("../img/takeout.png") no-repeat
  background-size contain
  height 50px
  background-position 100% 0
  top 5px

.select-1
  padding 14px 25px
  font-size 14px
  border 1px solid $borderColor
  background $whiteColor
  clearfix()
  label
    color #999
    display block
    float left
    width 80px
    line-height 26px
  ul
    overflow hidden
    li
      display inline-block
      a
        display block
        height 26px
        line-height 26px
        width 76px
        text-align center
        color #666
        text-decoration none
      &.on
        a
          border-radius 3px
          background $mainColor
          color $whiteColor
      &.active
        a
          color $redColor

.select-2
  margin-top 10px
  line-height 40px
  padding 0 10px
  background-color #fffdee
  border 1px solid #ffe4b9
  font-size 14px
  letter-spacing 2px
  span
    font-style normal
    color #f63
    font-size 20px
    display inline-block
    margin 0 7px
  a
    color $mainColor

.food-list
  border 1px solid $borderColor

.shop-block
  box-sizing border-box
  display block
  position relative
  width 25%
  float left
  background-color #fff
  border-bottom 1px #f5f5f5 solid
  height 137px
  padding 20px
  &:hover
    background #f5f5f5
    .shop-discount
      display block

.shop-block:nth-child(4n)
  &:hover
    background #f5f5f5
    .shop-discount
      display block
      left -100%
      &::before, &::after
        border: solid transparent;
        content: ' ';
        height: 0;
        left 100%
        position: absolute;
        width: 0;
      &::after
        border-width: 12px;
        border-left-color: #ffffff;
        top: 12px;
        right: 24px;
      &::before
        border-width: 14px;
        border-left-color: #ccc;
        top: 10px;

.shop-logo
  float left
  height 100%
  width 110px
  text-align center
  img
    position relative
    width 70px
    height 70px
    margin-bottom 10px
  h4
    font-size 12px
    color #999

.shop-name
  overflow hidden
  color #999
  font-size 12px
  h4
    color #0089dc
    margin-right 20px
    margin-bottom 6px
    font-size 16px
    font-weight 600
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
  .rate
    font-size inherit
    height 20px
    margin-bottom 5px
    span
      line-height 20px

.stars
  position relative
  display block
  float left
  width 60px
  line-height 20px
  font-size inherit
  height 20px
  margin-right 10px
  i:nth-child(1)
    font-size inherit
    position absolute
    left 0
    top 0
    width 100%
    color #ccc
  i:nth-child(2)
    font-size inherit
    position absolute
    left 0
    top 0
    width 100%
    color $starColor
    overflow hidden

.shop-tags
  margin 9px 0px
  i
    vertical-align top
    line-height 20px

.shop-discount
  position absolute
  display none
  top 0
  left 100%
  z-index 3
  width 100%
  padding 20px
  border 2px solid #ccc
  background #ffffff
  -webkit-filter drop-shadow(1px 2px 4px #ccc)
  -ms-filter drop-shadow(1px 2px 4px #ccc)
  -o-filter drop-shadow(1px 2px 4px #ccc)
  h4
    color #000
    margin-right 20px
    margin-bottom 6px
    font-size 16px
    font-weight 600
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
    line-height: 16px;
    height: 30px;
  &::before, &::after
    border: solid transparent;
    content: ' ';
    height: 0;
    left: -29px;
    position: absolute;
    width: 0;
  &::after
    border-width: 12px;
    border-right-color: #ffffff;
    top: 12px;
    left: -24px;
  &::before
    border-width: 14px;
    border-right-color: #ccc;
    top: 10px;

.shop-discount-content
  color #999999
  border-top 1px solid #ccc
  padding 10px 0px
  font-size 12px
  line-height 20px
  .shop-ps
    color #000000
    background #f5f5f5
    padding: 10px;
    margin 5px 0px
  .shop-ps-money
    display: block;
    float: left;
    width: 120px;
    border-right: 1px solid #ccc;
    text-align: center;
  .shop-ps-time
    text-align: center;
    overflow: hidden;
    display: block;

.load-more
  line-height 3
  text-align center
  background-image linear-gradient(to bottom, #f9f9f9, #eee)
  font-size 18px
  color #777
  width 100%
  height 100%
  border 0px
  cursor pointer

.sidebar
  position fixed
  right 0
  top 0
  height 100%
  background #504d53
  width 35px
  z-index 10
  i
    font-size 23px
  &.active
    width 330px
  transition width 0.3s ease-in-out

.sidebar-left
  line-height 35px
  writing-mode vertical-lr
  float left
  width 35px
  height 100%
  i, a
    color #ccc
  a
    display inline-block
    float left
    &:hover, &.active
      background-color #26a2ff
      outline 0
      color #fff
      i
        color #fff

  .sidebar-hover
    &::before
      position: absolute;
      text-align center
      right: 100%;
      top: 4px;
      color: #fff;
      writing-mode: horizontal-tb;
      width: 100px;
      background-color rgba(0, 0, 0, .75)
      display none
      border-radius: 5px;
      font-size: 14px;
      line-height: 33px;
      margin-right: 10px;
    &::after
      content: '';
      border 10px solid rgba(0, 0, 0, 0.75)
      width 0px
      position absolute
      left: -10px;
      top: 13px;
      height: 0px;
      border-width: 8px 8px 8px 8px;
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.75)
      border-style: solid;
      display none
    &::before, &::after
      transition .5s ease-in-out
    &:hover
      &::before, &::after
        display block
  .sidebar-shop
    position absolute
    width 100%
    text-align center
    top 40%
    transform translateY(-50%)
    .sidebar-order
      width: 35px;
      line-height: 35px;
      padding-bottom: 5px;
      cursor pointer
      box-sizing: border-box;
      height: 40px;
      i
        font-size 25px
      &::before
        content: '\6211\7684\8BA2\5355';
    .sidebar-shopcar
      display inline-block
      height 100px
      width 35px
      border-top 1px solid #ccc
      border-bottom 1px solid #ccc
    .sidebar-email
      position relative
      box-sizing: border-box;
      height: 40px;
      padding-top 5px
      text-align left
      cursor pointer
      &::before
        content: '我的信息';

  .sidebar-connect
    position absolute
    width 100%
    text-align center
    bottom 0
    transform translateY(-50%)
    a
      text-align center
      width: 35px;
      line-height: 35px;
      color: #ccc;
      margin: 5px 0;
      i
        font-size 20px
    .sidebar-ercode
      display inline-block
      text-align center
      box-sizing: border-box;
      height: 40px;
      .sidebar-ercode-img
        position absolute
        left 100%

    .gotop
      display none
      text-align center
    .sidebar-kefu
      position relative
      box-sizing: border-box;
      height: 40px;
      &::before
        content: '客服';

.sidebar-head
  background $whiteColor
  height 35px
  width 100%
  padding 5px 10px
  span
    font-size 16px
    max-width: 240px;
    display: inline-block;
    line-height: 24px;
    color: #333;
  i
    float right
    font-size 12px
    color #666
    line-height 24px

.sidebar-content
  overflow hidden
  height 100%
  background #e6e6e6

footer
  border-top 1px solid #eee
  background-color #f7f7f7
  margin-top 50px

.foot-left
  float left
  width 50%
  box-sizing border-box
  .foot-link
    float left
    width 33.3%
    margin-top 30px
    li
      a
        color: #999;
        display: block;
        line-height: 24px;
        font-size: 12px;
      &:first-child
        font-size: 14px;
        line-height: 30px;
    &:last-child
      border-right 1px solid #eeeeee

.foot-right
  float left
  width 50%
  margin-top 30px
  .foot-feedback
    float left
    width 50%
    padding-left 35px
    p
      margin-bottom: 12px;
      color: #666;
      font-size: 14px;
      line-height: 24px;
    i
      color #ccc
      vertical-align middle

  .foot-download
    float left
    width 50%
    img
      float left
      width 90px
      height 90px
      margin-right 20px
    h3
      overflow: hidden;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      line-height: 30px;
      text-align left
      margin-top 20px
    p
      overflow: hidden
      text-align left
      font-size 12px
      color #666
      margin 3px 0 10px

.foot-copyright
  font-size 12px
  padding-top 60px
  color #999
  text-align center

.foot-police
  display block
  height 30px
  margin 30px auto
  text-align center

@media (max-width: 1260px)
  .container
    width 960px

  nav
    a:nth-child(5)
      display none
    a:nth-child(6)
      margin-left 0px

  .nav-link
    width 104px

  .shop-block
    width 33.3%

  .shop-block:nth-child(4n)
    &:hover
      background #f5f5f5
      .shop-discount
        display block
        left 100%
        &::before, &::after
          border: solid transparent;
          content: ' ';
          height: 0;
          left: -29px;
          position: absolute;
          width: 0;
        &::after
          border-width: 12px;
          border-right-color: #ffffff;
          top: 12px;
          left: -24px;
        &::before
          border-width: 14px;
          border-right-color: #ccc;
          top: 10px;

  .shop-block:nth-child(3n)
    &:hover
      background #f5f5f5
      .shop-discount
        display block
        left -100%
        &::before, &::after
          border: solid transparent;
          content: ' ';
          height: 0;
          left 100%
          position: absolute;
          width: 0;
        &::after
          border-width: 12px;
          border-left-color: #ffffff;
          top: 12px;
          right: 24px;
        &::before
          border-width: 14px;
          border-left-color: #ccc;
          top: 10px;
